<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 基础类型: 单纯值的赋值
        // const a = 10
        // const b = a
        // console.log(b) // 10
        // 复杂类型: 数组/对象-赋值过程是复制堆地址
        // const obj = { a: 10 }
        // const obj2 = obj // obj里装的对象地址, 赋予给了obj2  (obj和obj2指向的是同一个对象)
        // obj2.a = 100
        // console.log(obj.a) // 100
        // 如何让对象脱离关系(互不影响) - 拷贝使用场景
        // 浅拷贝:
        const obj = {
            a: 10,
            b: 20,
            c: {
                arr: [
                    { name: '小明' },
                    { name: '小花' }
                ]
            },
            d: ['张三', '李四']
        }
        const obj2 = { ...obj } // obj2本身就是一个新对象(已经脱离了和obj的关系)
        // ...obj把obj里里的key+value, 复制过来
        obj2.c.arr[0].name = '哈哈哈哈哈'
        obj2.a = 20
        obj2.d[1] = '赵云'
        console.log(obj) // 深层关系还是互相引用
        // 深层: 第二层引用类型

        // 深拷贝:
        const obj = {
            a: 10,
            b: 20,
            c: {
                arr: [
                    { name: '小明' },
                    { name: '小花' }
                ]
            }
        }

        const obj2 = JSON.parse(JSON.stringify(obj))
        obj2.c.arr[0].name = '哈哈哈哈哈'
        console.log(obj);
    </script>
</body>

</html>
